<template>
  <el-dialog @open="onOpen" title="提目浏览" :visible="showDialog" width="80%" @close="onClose">
    <el-row style="margin-top:10px">
      <el-col :span="6"
        ><span>【题型】：{{ this.row.questionType }}</span></el-col
      >
      <el-col :span="6"
        ><span>【编号】：{{ this.row.id }}</span></el-col
      >
      <el-col :span="6"
        ><span>【难度】：{{ this.row.difficulty | aaa() }}</span></el-col
      >
      <el-col :span="6"
        ><span>【标签】：{{ this.row.tags }}</span></el-col
      >
    </el-row>
    <el-row style="margin-top:20px">
      <el-col :span="6"
        ><span>【学科】：{{ this.row.subject }}</span></el-col
      >
      <el-col :span="6"
        ><span>【目录】：{{ this.row.catalogID }}</span></el-col
      >
      <el-col :span="6"
        ><span>【方向】：{{ this.row.direction }}</span></el-col
      >
    </el-row>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <span>
      【题干】:
      <br />
      <div class="tigan">
        <p v-html="this.row.question"></p>
        <!-- 简答题控制单选多选,并吟唱题干 -->
        <p v-if="this.questionType !== '3'">{{ this.row.question | qstType() }}</p>
        <!-- 单选框和多选框的显示和隐藏 -->
        <div v-for="item in btnData" :key="item.id">
          <el-radio v-if="row.questionType === '1'" :label="1" :value="item.isRight">
            {{ item.title }}
        </el-radio>
          <el-checkbox v-if="row.questionType==='2'" :value-"item.data.isRight">
            {{ item.title }}
          </el-checkbox>
        </div>
      </div>
    </span>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <span>
      【参考答案】:
      <el-button type="danger" size="small">视频答案解析</el-button>
    </span>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <span> 【答案解析】:{{ this.row.videoURL }} </span>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <span> 【题目备注】:{{ this.row.remarks }} </span>

    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入常量
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
export default {
  name: 'questionsCheck',
  data() {
    return {
      // 题型
      questionType: ''
      // row
      // row: {
      //   subjectID: '', //学科
      //   difficulty: '', //难度
      //   questionType: '', //试题类型
      //   tags: '', //标签名称
      //   province: '', //企业所在地省份
      //   city: '', //企业所在城市
      //   keyword: '', //关键字
      //   remarks: '', //题目备注
      //   shortName: '', //企业简称
      //   direction: '', //方向
      //   creatorID: '', //录入人
      //   catalogID: '' //目录
      // }
    }
  },
  props: {
    // 控制对话框的显示和隐藏
    showDialog: {
      // 类型
      type: Boolean,
      // 默认值是false
      default: false
    },
    row: {
      type: Object,
      // 必填项
      required: true
    },
    btnData: {
      type: Object,
      // 必填项
      required: true
    }
  },
  methods: {
    // 点击了右上角的x号
    onClose() {
      this.$emit('update:showDialog', false)
      // 清空row
      this.$emit('update:row', {})
      // 对黄狂关闭清空 题型 数据
      ;(this.questionType = ''),
        // 清空题干
        (this.question = '')
      //  清空详情
      this.$emit('update:btnData', {})
    },
    // 对话框打开的回调
    onOpen() {
      // 直接赋值
      this.questionType = this.row.questionType
      this.row = this.row
      this.question = this.row.question
    }
  }
}
</script>

<style lang="scss" scoped>
.tigan {
  color: blue;
  font-size: 14px;
}
</style>
